<template>
  <div id="operationLog" v-loading = "loading" element-loading-text = "数据正在加载中">

    <template v-if="isSelect">
      <div class="top-div">
        <Top @selectOperationLogParams="selectOperationLogParams" />
      </div>

      <div class="center-div">
        <Table :tableOperationLogData="tableOperationLogData" @changeLoad="changeLoad" @showDetail="showDetail" />
      </div>

      <div class="bottom-div">
        <Bottom :selectParams = "selectParams" @changeLoad="changeLoad" @tableOperationLogDataFun="tableOperationLogDataFun"/>
      </div>
    </template>

    <template v-else>
      <router-view />
    </template>

  </div>
</template>

<script>
import Top from './components/top.vue'
import Table from './components/table.vue';
import Bottom from './components/bottom.vue';

export default {
  name: "operationLog",

  data() {
    return {
      tableOperationLogData: [],
      loading: true,
      selectParams: {},
      isSelect: true
    }
  },
  methods: {
    showDetail(row) {
      this.isSelect = false
      this.$router.push({'name':"operationLogDetail",'params': row})
    },
    tableOperationLogDataFun(formData) {
      this.tableOperationLogData = formData 
    },
    changeLoad(load){
      this.loading = load
    },
    selectOperationLogParams(params) {
      this.selectParams = JSON.parse(JSON.stringify(params))
    }
  },
  mounted() {
    // 解决如果在新增用户、更新用户界面 刷新页面，导致页面渲染出错
    if(!this.$router.history.current.meta.isSelect) {
      this.$router.push({name:'operationLog'})
    }
  },
  watch: {
    $route(to,from) {
      if(to.path === '/log/operationLog') { 
        this.isSelect = true
      }
    }
  },
  components: { Top, Table, Bottom }
}
</script>

<style scoped lang="scss">
.top-div{
  display: inline-block;
  margin: 20px;
}

.center-div {

}

.bottom-div {
  height: 5vh;
}
</style>